<template>
  <a-layout-sider class="jm-debug-layout-sider">
    <table class="jm-debug-list-table">
      <thead>
        <th>
          <td align="center">组件名称</td>
        </th>
        <th>
          <td>状态</td>
        </th>
      </thead>
      <tbody>
        <tr v-for="item in xmls" :key="item.name" class="jm-debug-list-table-row">
          <td>
            {{item.showName || item.name}}
          </td>         
          <td>
            <a-button class="jm-debug-previewing-btn" v-if="item.clazzType === previewing.clazzType && item.version === previewing.version" type="link" size="small" disabled>预览中</a-button>
            <a-button v-else type="link" size="small" @click="preview(item)">预览</a-button>
          </td> 
        </tr>
      </tbody>
    </table>
  </a-layout-sider>
</template>

<script>
export default {
  inject: ['jmProvide'],
  data() {
    return {
      columns: [{
        dataIndex: 'name',
        key: 'name',
        title: '组件名称'
      }]
    }
  },
  computed: {
    xmls() {
      return this.jmProvide.xmls
    },
    previewing() {
      const { params } = this.$route

      return {
        clazzType: params.clazzType,
        version: params.version
      }
    }
  },
  methods: {
    preview(item) {
      this.$router.push({
        path: `/${item.clazzType}/${item.version}`
      })
    }
  }
}
</script>

<style lang='less'>
  .jm-debug-layout-sider {
    padding: 8px; 
  }

  .jm-debug-list-table {
    td {
      color: white;
    }

    &-row {
      td {
        padding: 8px 0;
      }
    }
  }

  .jm-debug-previewing-btn {
    color: grey!important;;
  }
</style>
